<script>
function reset(){
    document.getElementById('reservation').reset();
}
function Validateform(){			
	var Form = document.reservation;
    var firstname = document.getElementById('firstname').value;
    var lastname = document.getElementById('lastname').value;
    var phone = document.getElementById('phone').value;
    var email = document.getElementById('email').value;
    var date = document.getElementById('date').value;
    var time = document.getElementById('time').value;
    var number = document.getElementById('number').value;
    
    var error=document.getElementById("error");
    if(firstname==""){
        //error.innerHTML='<div align="center" style="color:#F00;">Fornavn skal udfyldes</div>';
        addclass("#l_firstname")
		document.getElementById('firstname').value = "";
        Form.firstname.focus();
		return;	
	}
    else {
		removeclass("#l_firstname")
	}
    if(phone==""||check_number(Form.phone)){
        addclass("#l_phone")
		document.getElementById('phone').value = "";
        Form.phone.focus();
		return;	
	}
    else {
		removeclass("#l_phone")
	}
    if(!checkEmail()||email==""){
        addclass("#l_email")
		document.getElementById('email').value = "";
        Form.email.focus();
		return;	
	}
    else {
		removeclass("#l_email")
	}
    if(!checkdate()&& date!=""){
        addclass("#l_date")
		document.getElementById('date').value = "";
        Form.date.focus();
		return;	
	}
    else {
		removeclass("#l_date")
	}
    if(!checktime()&&time!=""){
        addclass("#l_time")
		document.getElementById('time').value = "";
        Form.time.focus();
		return;	
	}
    else {
		removeclass("#l_time")
	}
    if(check_number(Form.number)&&number!=""){
        addclass("#l_number")
		document.getElementById('number').value = "";
        Form.number.focus();
		return;	
	}
    else {
		removeclass("#l_number")
	}
    
    if(!max500('text')){
        addclass("#l_text")
		return;	
	}
    else {
		removeclass("#l_text")
	}
    
    document.getElementById('reservation').submit();
}
function addclass(id){
    jQuery(document).ready(function(){
	jQuery(id).addClass('error');
	});
}
function removeclass(id){
    jQuery(document).ready(function(){
	jQuery(id).removeClass('error');
	});
}
function checkEmail(){
	var yemail = document.getElementById('email');
	var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
		if (!filter.test(yemail.value)) {
			return 0;
		}
		else{
			return 1;
		}
}
function check_number(field){
          var check = true;
          var value = field.value;
          //check that all characters are digits, ., -, or ""
          for(var i=0;i < field.value.length; ++i){
               var new_key = value.charAt(i); //cycle through characters
               if(((new_key < "0") || (new_key > "9")) && !(new_key == "")){
                    check = false;
                    break;
               }
          }
          //apply appropriate colour based on value
          if(!check){
               return 1;
          }
          else{
               return 0;
          }
}
function checkdate(){
	str=document.getElementById('date').value;
	document.getElementById('date').value=str.replace(/\s/g, "");
	var v = new RegExp();
	v.compile("^(3[01]|[12][0-9]|0[1-9])[/](1[0-2]|0[1-9])[/][0-9]{4}$");
	if (!v.test(document.getElementById('date').value)) {
		document.getElementById('date').value = "";
		return 0;
	}
	else{
		return 1;
	}
}
function checktime(){
	str=document.getElementById('time').value;
	document.getElementById('time').value=str.replace(/\s/g, "");
	var v = new RegExp();
	v.compile("^(2[0-4]|1[0-9]|0[0-9])[:][0-9]{2}$");
	if (!v.test(document.getElementById('time').value)) {
		document.getElementById('time').value = "";
		return 0;
	}
	else{
		return 1;
	}
}
function max500(id){
	var values = document.getElementById(id).value;
	if(values.length > 500){
		document.getElementById(id).value = values.substring(0,500);
		return 0;
	}
	else{
		return 1;
	}
}
</script>
<style>
.error{
    color: #ff0000;
}
</style>
<div id="main">
    <div class="m20l m20r m20t">
    	<div class="bg_imgleft">
        	<img src="<?php echo base_url(); ?>assets/img/img_reservationer.jpg" alt="" />
        </div>
        <div class="w590 float_right">
        	<p class="title_1">Reservationer</p>
        	<div style="padding-top: 10px;">
            <div id="error"></div> 
            <form name="reservation" id="reservation" action="<?php echo base_url(); ?>reservationer_send.html" method="post">                 	
              <div class="w450 input_form float_left">
                  	<label id="l_firstname" class="w225">Fornavn: <font color="#ff0000">*</font></label>
                    <label class="w215">Bordbestilling:</label><br class="clear_left" />
                  	<input type="text" name="firstname" id="firstname" value="" class="w215" />
                    <input type="checkbox" name="reser" id="reser" value="Bordbestilling" style="border:none;" class="mid" /><br />
                  	<label id="l_lastname" class="w225">Efternavn: </label>
                    <label class="w215">Arrangement:</label><br class="clear_left" />
                  	<input type="text" name="lastname" id="lastname" value="" class="w215" />
                    <input type="checkbox" name="event" id="event" value="Arrangement" style="border:none;" class="mid" /><br />
                  	<label id="l_phone" class="w225">Telefonnr: <font color="#ff0000">*</font></label>
                    <label id="l_date" class="w215">Dato: <font color="#715746">(Ex: 02/05/2010)</font></label><br class="clear_left" />
                  	<input type="text" name="phone" id="phone" value="" class="w215" />
                    <input type="text" name="date" id="date" value="" class="w215" /><br />
                  	<label class="w225">Faxnr:</label>
                    <label id="l_time" class="w215">Klokkeslet: <font color="#715746">(Ex: 15:30 eller 03:00)</font></label><br class="clear_left" />
                    <input type="text" name="fax" id="fax" value="" class="w215" />
                    <input type="text" name="time" id="time" value="" class="w215" /><br />
                    <label id="l_mobile" class="w225">Mobilnr:</label>
                    <label id="l_number" class="w215">Antal personer:</label><br class="clear_left" />
                  	<input type="text" name="mobile" id="mobile" value="" class="w215" />
                    <input type="text" name="number" id="number" value="" class="w215" /><br />
                  	<label id="l_email">E-mail: <font color="#ff0000">*</font></label><br class="clear_left" />
                  	<input type="text" name="email" id="email" value="" class="w215" /><br />
                    <label id="l_text">Bemærkninger: <font color="#715746">(Max 500 tegn)</font></label><br class="clear_left" />
                    <textarea name="text" id="text" rows="5" class="w440"></textarea><br />
                    <a href="javascript:void(0);" onclick="Validateform();"><img src="<?php echo base_url(); ?>assets/img/bt_indsend.png" alt="" /></a>
                    <a href="javascript:void(0);" onclick="reset();"><img src="<?php echo base_url(); ?>assets/img/bt_nulstil.png" alt="" /></a>
                  	
                </div>
                <div class="w101 float_left m10l">
                	<p>Medlem af</p>
                    <div class="m10t"><input name="member" type="radio" name="radio" value="KDY" class="mid m5r" /><span class="mid">KDY</span></div>
                    <div class="m10t"><input name="member" type="radio" name="radio" value="SKS" class="mid m5r" /><span class="mid">SKS</span></div>
                    <div class="m10t"><input name="member" type="radio" name="radio" value="MRC" class="mid m5r" /><span class="mid">MRC</span></div>
                    <div class="m10t"><input name="member" type="radio" name="radio" value="Anden" class="mid m5r" /><span class="mid">Anden</span></div>
                    <div class="m10t"><input name="member" checked="true" type="radio" name="radio" value="Ikke medlem" class="mid m5r" /><span class="mid">Ikke medlem</span></div>
                </div>
              <div class="clear_left"></div>
              </form>
            </div>
        </div>
        <div class="clear"></div>
    </div>
</div>
<script>
jQuery(document).ready(function(){
	jQuery("#reservationer_current").addClass('current');
	});
</script>